<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>留言板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" styles="width:500px; margin: 0 auto;">
        <div class="message">
            <!-- <div>
                <span>昵称：</span>
                <input type="text" value="" placeholder="请输入留言内容" />
            </div> -->
            <v-input v-model="username" ref="input-com"></v-input>
            <!-- <div>
                <span>留言板内容：</span>
                <textarea></textarea>
            </div> -->
            <v-textarea v-model="message"></v-textarea>
            <button @click="handleSend">发布</button>
        </div>
        <div class="list">  <!-- 留言板列表-->
            <!-- <div>
                <div class="list-item">
                    <span>昵称</span>
                    <div class="list-msg">
                        <p>留言内容</p>
                        <a class="list-reply">回复</a>
                    </div>
                </div>
            </div> -->
            <v-list :list="list" @reply="handleReply" @delete="handleDelete"></v-list>
        </div>
    </div>

    <script type="text/template" id = "v-input">
        <div>
            <span>昵称：</span>
            <input type="text" :value="value" @input="$emit('input',$event.target.value)" ref="input-ref" placeholder="请输入留言内容">
        </div>
    </script>
    <script type="text/template" id="v-textarea">
        <div>
            <span>留言板内容: </span>
            <textarea :value="value" @input="$emit('input',$event.target.value)"></textarea>
        </div>
    </script>

    <script type="text/template" id ="v-list">
        <div>
            <div class= "list-item" v-for="(item,index) in itemlist">
                <span>{{item.name}}</span>
                <div class= "list-msg">
                    <p>{{item.message}}</p>
                    <a class="list-reply" @click="handleDelete(index)">&nbsp;&nbsp;&nbsp;&nbsp;删除</a>
                    <a class = "list-reply" @click="handleReply(index)">回复</a>
                </div>
            </div>
        </div>
    </script>
    <script>
        Vue.component('v-input', {
            template: "#v-input",
            props: {
                value: {
                    type: String,
                    defalut: '',
                }
            },
            methods: {
                fouceEvent:function() {
                    this.$refs['input-ref'].focus();
                }
            }
        });
        Vue.component('v-textarea', {
            template: '#v-textarea',
            props: {
                value: {
                    type: String,
                    default: '',
                }
            }
        })
        Vue.component('v-list', {
            template: '#v-list',
            props: {
                list: {
                    type: Array,
                    default: []
                }, 
            },
            data : function(){
                return {
                    itemlist : this.list
                }

            },
            methods:{
                handleReply:function(index) {
                    this.$emit("reply",index);
                },
                handleDelete: function(index) {
                    this.$emit("delete",index);
                }
            }
        })
        var app = new Vue({
            el: "#app",
            data: function() {
                return {
                    username: '',
                    message: '',
                    list: []
                }
            },
            methods: {
                handleSend: function() {
                    if (this.username==='') {
                        alert("请输入昵称")
                        return;
                    }
                    if (this.message === '') {
                        alert("请输入留言内容")
                        return;
                    }
                    this.list.push({
                        name: this.username,
                        message: this.message
                    });
                    this.message = ""
                    this.username = ''
                    console.log(this.list)
                },
                handleReply:function(index) {
                    var name= this.list[index].name;
                    this.message="回复@" + name + ":";
                    this.$refs['input-com'].fouceEvent()
                },
                handleDelete: function(index) {
                    this.list.splice(index,1)
                }
            }
        });
    </script>
</body>
</html>